<template>
  <ul class="footer">
    <li :class="{ active: currentRoute === 'Home' }" @click="toIndex">
      <i class="fa fa-home"></i>
      <p>首页</p>
    </li>
    <li :class="{ active: currentRoute === 'Find' }" @click="toFind">
      <i class="fa fa-compass"></i>
      <p>发现</p>
    </li>
    <li :class="{ active: currentRoute === 'OrderList' }" @click="toOrderList">
      <i class="fa fa-file-text-o"></i>
      <p>订单</p>
    </li>
    <li :class="{ active: currentRoute === 'MyPage' }" @click="toMyPage">
      <i class="fa fa-user-o"></i>
      <p>我的</p>
    </li>
  </ul>
</template>
<script>
	import { computed } from 'vue';
	import { useRoute, useRouter } from 'vue-router';

	export default {
		name: "Footer",
		setup() {
			const route = useRoute();
			const router = useRouter();
			const currentRoute = computed(() => route.name);

			const toIndex = () => {
				router.push({ name: "Home" });
			};
    
			const toFind = () => {
				router.push({ name: "Find" });
			};
    
			const toOrderList = () => {
				router.push({ name: "OrderList" });
			};
			
			const toMyPage = () => {
				router.push({ name: "MyPage" });
			};


			return {
				currentRoute,
				toIndex,
				toFind,
				toOrderList,
				toMyPage,
			};
	},
};
</script>

<style scoped>
.footer {
  width: 100%;
  height: 14vw;
  border-top: solid 1px #ddd;
  background-color: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.footer li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #999;
  user-select: none;
  cursor: pointer;
}
.footer li p {
  font-size: 2.8vw;
}
.footer li i {
  font-size: 5vw;
}
.footer li.active i {
  color: #0097ff; /* 高亮颜色 */
}
.footer li.active p {
  color: #0097ff; /* 高亮颜色 */
}
</style>